---
title: Guidelines
redirect_from:
  - /components/checkbox/
---

import SupportProgressiveDisclosureSnippet from "snippets/support-progressive-disclosure.mdx";

<ReactExample exampleId="Checkbox-default" />

## When to use

- To present multiple options that can each be selected.
- To offer help or error handling for simple settings.
- For changes that require confirmation after selection.

## When not to use

- When only one of multiple options can be selected---use a [radio](/components/input/radio/).
- You want to group multiple options together into a single basic choice---use a [choice group](/components/input/choicegroup/).
- For single on/off settings with an instant response---use a [switch](/components/interaction/switch/).

## Component status

<ComponentStatus component="Checkbox" />

## Content structure

![Label: works best when short; checkbox controller: indicates the state, which can be selected or not; info text: adds more explanation to the label and can contain a link, usually 'learn more' or similar.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:0%3A199)

## Behavior

<SupportProgressiveDisclosureSnippet />

<GuidelineImages>

<DoImage>

![A checkbox with additional info with a link to descriptions.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:76%3A1005)

Present only absolutely necessary information with interactions to offer more.

</DoImage>

<DontImage>

![A checkbox with a very, very long paragraph of description as additional info.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:77%3A0)

Don't overwhelm users with too much information at once.

</DontImage>

</GuidelineImages>

## Content

### Write positive labels

In addition to [writing positively in general](/kiwi-use/content/voice-and-tone/passionate/#use-positive-language),
you should especially focus on positive labels for checkboxes.
Focus on what happens when the checkbox is selected.
Don't use the selected state for turning off features.

<GuidelinesSideBySide>

<Do>

- Allow notifications
- Receive emails with personalized offers
- Passport has no expiration

</Do>

<Dont>

- Turn notifications off
- Select to opt out of emails with personalized offers
- I need to enter dates for my passport expiration

</Dont>

</GuidelinesSideBySide>

### Use parallel labels

Whether you're offering filters for transport options,
types of notifications to receive, or additional services to purchase,
always present options using the same structure.

<GuidelinesSideBySide>

<Do>

- Plane, Bus, Train
- Trip deals, Newsletter, Booking information
- Cabin bag, Checked bag, Special meal

</Do>

<Dont>

- Fly, Drive, Train
- Trip deals, Get our newsletter, Get booking info in your inbox
- Cabin bag, Checked bag, Choose what you want to eat

</Dont>

</GuidelinesSideBySide>
